<template>
    <!-- 规格卡片(每点击一次添加规格会展示出来的页面) -->
    <div class="card mb-3" style="line-height:1.2;">
        <div class="card-header d-flex align-items-center">
            <!-- @input="vmodel('name',index,$event)"分别对应函数的key、index、 value、 -->
            规格项：<el-input size="mini" style="width:200px;" :value="item.name" @input="vmodel('name', index, $event)">
                <el-button slot="append" icon="el-icon-more" @click="chooseSkus"></el-button>
            </el-input>
            <el-radio-group size="mini" style="margin-bottom: -10px; margin-left: 5px;"
                @input="vmodel('type', index, $event)" :value="item.type">
                <el-radio :label="0">无</el-radio>
                <el-radio :label="1">颜色</el-radio>
                <el-radio :label="2">图片</el-radio>
            </el-radio-group>
            <!-- 自动将自己推向右边class="ml-auto" -->
            <!-- 上移 -->
            <el-button class="ml-auto" icon="el-icon-top" size="mini" :disabled="index === 0"
                @click="sortCard('moveUp', index)"> </el-button>
            <el-button icon="el-icon-bottom" size="mini" :disabled="total === (index + 1)"
                @click="sortCard('moveDown', index)"> </el-button>
            <el-button type="text" size="mini" @click="delSkuCardEvent"> 删除 </el-button>
        </div>
        <div class="card-body">
            <!-- 规格属性列表 -->
            <div class="d-flex align-items-center flex-wrap">
                <!-- 封装为sku-card-children组件使用 ,:cardIndex="index"接收当前卡片的索引-->
                <sku-card-children :type="item.type" v-for="(item2, index2) in item.list" :key="index2" :item="item2"
                    :index="index2" :cardIndex="index"
                    v-dragging="{ item: item2, list: item.list, group: `skuItem${index}` }"></sku-card-children>
                <!-- <div class="border py-1 px-2 rounded mr-2 position-relative d-flex align-items-center">
                            需要根据sku_card.type选项来切换是出现颜色选择器还是图片选择 
                            <div v-if="item.type !=0">
                                 颜色选择器 
                                <el-color-picker class="d-flex align-items-center"
                                size="mini" v-if="item.type===1"></el-color-picker>
                                 图片选择 
                                 <span class="btn btn-light border"  v-else>
                                    <i class="el-icon-circle-plus"></i>
                                 </span>
                            </div>
                            
                            <input value="内容" class="form-control text-center border-0" style="width: 80px; font-size: 15px;"/>
                            <span class="btn btn-light p-0 position-absolute"
                            style="line-height: 1; right: -7px;top: -7px;">
                                <i class="el-icon-circle-close"></i></span>
                        </div> -->
            </div>
            <!-- 增加规格属性 -->
            <div class="mt-4">
                <el-button type="text" size="mini" icon="el-icon-plus" @click="addSkuValueEvent">增加规格值</el-button>
            </div>
        </div>
    </div>

    <!-- <el-button type="success" 
            class="mt-3" size="mini" 
            @click="addSkuCard">添加规格</el-button> -->

</template>
<script>
import { mapState, mapMutations } from 'vuex';
import skuCardChildren from './sku-card-children.vue';
let defaultVal = ['属性值', '#FFFFFF', '/favicon.ico']

export default {
    inject: ['app', 'layout'],
    components: { skuCardChildren },
    props: {
        item: Object,
        index: Number,
        total: Number,
    },
    data() {
        return {
            // 用来声明规格属性列表
            // list: this.item.list,
        }
    },
    mounted() {
        // this.$dragging.$on('dragged', ({ value }) => {
        //     console.log(value.item)
        //     console.log(value.list)
        //     console.log(value.otherData)
        // })
        this.$dragging.$on('dragend', () => {
            // 拖拽结束后更新goods_create.js中，即全局的list的值
            // console.log('拖拽结束');

            this.sortSkuValue({
                index: this.index,
                value: this.item.list,
            })

            this.$axios.post('/admin/goods_skus_card_value/sort', {
                sortdata: this.item.list.map((item, index) => {
                    return {
                        id: item.id,
                        order: index + 1
                    }
                })
            }, {
                token: true
            })

        });

        // // 监听item的变化,让其新的数值赋值给list进行渲染
        // this.$watch('item.list',(newValue)=>{
        //     // console.log(newValue)
        //     this.list = newValue
        // })

    },
    computed: {
        // 放到create.vue中去了
        // ...mapState('goods_create', {
        //     sku_card: state => state.sku_card,
        // }),
        //   计算规格卡片总数
        // skuCardTotal(){
        //    return this.sku_card.length;
        // }

        // 从store中拿到存放数组排序后的的数组
        ...mapState({
            sku_card: state => state.goods_create.sku_card
        })
    },
    methods: {
        // 修改state方法二
        ...mapMutations('goods_create', ['delSkuCard', 'vModelSkuCard', 'sortSkuCard', 'addSkuValue',
            'sortSkuValue'
        ]),

        // 重写位于vuex中的delSkuCad方法
        delSkuCardEvent() {
            this.layout.showLoading()

            this.$axios.post('/admin/goods_skus_card/' + this.item.id + '/delete', {
            }, {
                token: true
            }).then(() => {
                this.layout.hideLoading()
                // let data = res.data.data
                this.delSkuCard(this.index)
            }).catch(() => {
                this.layout.hideLoading()
            })
        },
        updateSkucard() {
            this.$axios.post('/admin/goods_skus_card/' + this.item.id, {
                name: this.item.name,
                type: this.item.type,
                order: this.item.order || 50,
                goods_id: this.item.goods_id
            }, {
                token: true
            })
        },
        addSkuValueEvent(value = false) {
            this.layout.showLoading()

            this.$axios.post('/admin/goods_skus_card_value', {
                goods_skus_card_id: this.item.id,
                name: this.item.name,
                order: 50,
                value: typeof (value) === 'string' ? value : defaultVal[this.item.type] //在import下面进行定义了，来判断类型
            }, {
                token: true
            }).then((res) => {
                this.layout.hideLoading()

                let data = res.data.data

                data.text = this.item.type === 0 ? data.value : defaultVal[0];
                data.color = this.item.type === 1 ? data.value : defaultVal[1];
                data.image = this.item.type === 2 ? data.value : defaultVal[2];

                this.addSkuValue({
                    index: this.index,
                    data
                })
            }).catch(() => {
                this.layout.hideLoading()
            })
        },
        vmodel(key, index, value) {
            this.vModelSkuCard({ key, index, value })
            this.updateSkucard()
        },
        // 实现上移或者下移规格卡片
        sortCard(action, index) {
            this.sortSkuCard({ action, index });
            this.$axios.post('/admin/goods_skus_card/sort', {
                sortdata: this.sku_card.map((item, index) => {
                    return {
                        id: item.id,
                        order: index + 1
                    }
                })
            }, {
                token: true
            })
        },
        // 选择规格之后可以更改卡片中的值
        chooseSkus() {
            this.app.chooseSkus((res) => {
                // console.log(res)
                // vmodel是组件的方法，因此需要this指向

                this.vmodel('name', this.index, res.name);
                this.vmodel('type', this.index, res.type);
                // this.vmodel('list', this.index, res.list);
                // this.list = res.list

                // 选中后的属性让他展示在卡片里
                res.list.forEach(item => {
                    this.addSkuValueEvent(item.name)
                });
            })
        },

    }
}
</script>